<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
  <style>
    #form {
      width: 400px;
      margin: 0 auto;
      margin-top: 100px;
    }

    h1 {
      text-align: center;
    }

    input[type='submit'] {
      width: 100%;
    }
  </style>
</head>

<body>
  <form id="form">
    <h1>注册页面</h1>
    <div class="form-group">
      <input type="text" name="username" id="username" class="form-control input-lg" placeholder="用户名" required>
    </div>

    <div class="form-group">
      <input type="password" name="password" id="password" class="form-control input-lg" placeholder="密码" required>
    </div>

    <div class="form-group">
      <input type="text" name="nickname" id="nickname" class="form-control input-lg" placeholder="昵称" required>
    </div>

    <div class="form-group">
      <input type="submit" value="注册新用户" class="btn btn-primary btn-lg">
    </div>
  </form>

  <script src="/node_modules/jquery/dist/jquery.min.js"></script>
</body>


</html>
<script>
  // mvc开发模式下 前后端的业务逻辑也要明确 
  // 此时注册页面点击提交发送注册请求 后台做操作 相当于向接口发送请求 
  $(function () {
    $('#form').on('submit', function (e) {
      e.preventDefault()
      $.ajax({
        type: "post",
        url: "/addUser",
        data: $(this).serialize(),
        dataType: "json",
        success: function (result) {
          console.log(result);
          if (result.status === 0) {
            alert(result.msg)
            $('#form')[0].reset()
          } else {
            location.href = "/login"
          }
        }
      });
    })
  })
</script>